<template>
   <div class="login_container">
      <!-- 导航栏开始 -->
      <van-nav-bar title="登录" class="page_nav_bar">
         <!-- 点击哪里来的回哪里去 -->
         <!-- 左上角图标 -->
         <van-icon
            slot="left"
            name="cross"
            @click="$router.back()"
         />
      </van-nav-bar>
      <!-- 导航栏结束 -->
      <!-- 登录表单开始 -->
      <!-- 通过 ref 可以获取到 Form 实例并调用实例方法 -->
      <van-form @submit="onSubmit" ref="loginForm">
         <!-- 自动触发表单验证，验证通过触发submit事件
         验证失败，不会触发submit事件
         van-field组件类似于input组件 可用里边的属性-->
         <van-field
            v-model="user.mobile"
            name="mobile"
            placeholder="请输入手机号"
            :rules="userFormRules.mobile"
            type="number"
            maxlength="11"
         >
            <i
               slot="left-icon"
               class="toutiao toutiao-shouji"
            ></i>
         </van-field>
         <van-field
            v-model="user.code"
            name="code"
            placeholder="请输入验证码"
            :rules="userFormRules.code"
            type="number"
            maxlengt="6"
         >
            <i
               slot="left-icon"
               class="toutiao toutiao-yanzhengma"
            ></i>
            <template #button>
               <!-- time :倒计时时间 单位是毫秒
               format：自定义格式
               finish：倒计时结束后触发事件
               v-if默认倒计时不显示
               倒计时结束后再显示-->
               <van-count-down
                  v-if="isCountDownShow"
                  :time="1000 * 60"
                  format="ss s"
                  @finish="isCountDownShow = false"
               />
               <!-- 在表单中，除了提交按钮外，可能还有一些其他的功能性按钮，如发送验证码按钮。在使用这些按钮时，
               要注意将native-type设置为button，否则会触发表单提交。 -->
               <van-button
                  v-else
                  class="send_sms_btn"
                  round
                  size="small"
                  type="default"
                  @click="onSendSms"
                  native-type="button"
                  >发送验证码</van-button
               >
            </template>
         </van-field>
         <div class="login_btn_warp">
            <van-button
               class="login_btn"
               block
               type="info"
               native-type="submit"
               >登录</van-button
            >
         </div>
      </van-form>
      <!-- 登录表单结束 -->
   </div>
</template>

<script>
import { login, sendSms } from '@/api/user'
export default {
   name: 'loginIndex',
   data() {
      return {
         user: {
            mobile: '', // 手机号
            code: '' // 验证码
         },
         userFormRules: {
            mobile: [
               {
                  required: true,
                  message: '手机号不能为空'
               },
               {
                  pattern: /^1[3|5|7|8]\d{9}$/,
                  message: '手机号格式错误'
               }
            ],
            code: [
               {
                  required: true,
                  message: '验证码不能为空'
               },
               {
                  pattern: /^\d{6}$/,
                  message: '验证码格式错误'
               }
            ]
         },
         isCountDownShow: false
      }
   },
   methods: {
      async onSubmit() {
         //  1. 获取表单数据
         const user = this.user
         // 引入 Toast 组件后，
         // 会自动在 Vue 的 prototype 上挂载 $toast 方法，
         // 便于在组件内调用。
         // 2.表单验证
         // 在组件中必须通过 this.$toast调用
         this.$toast.loading({
            message: '登陆中...',
            forbidClick: true, // 禁用点击提示背景以外的东西
            duration: 0 // 持续时间，默认 两秒，如果为 0 则持续展示
         })
         // 3.提交表单请求登录
         // try里边的代码一定是成功的
         try {
            // 拿到这个对象，data这个属性
            const { data } = await login(user)
            // console.log(data.data)
            // data.data 拿到token
            this.$store.commit('setUser', data.data)
            console.log('登录成功')
            // 新的 toast 调用把上一个覆盖
            this.$toast.success('登陆成功')
            // 登陆成功跳转回原来页面
            // back 不严谨
            this.$router.back()
         } catch (err) {
            if (err.response.status === 400) {
               this.$toast.fail('手机号或验证码错误')
            } else {
               this.$toast.fail('登录失败，请稍后重试')
            }
         }
         // 4.根据请求响应结果处理后续操作
      },
      // 单独验证手机号
      async onSendSms() {
         // 1.校验手机号码  传参验证其中一个表单项
         // console.log(onSendSms);
         try {
            // 拿到手机号的name值 返回一个promise对象
            // 成功的进入这里
            // validate 支持传入 name 来验证单个或部分表单项
            // 通过 ref 可以获取到 Form 实例并调用实例方法
            await this.$refs.loginForm.validate('mobile')
            console.log('验证通过')
         } catch (err) {
            // 失败的进入这里
            return console.log('验证失败', err)
         }
         // 2.验证通过显示倒计时
         this.isCountDownShow = true
         // 3.请求发送验证码
         try {
            // 不用返回值 因为是给手机发验证码
            await sendSms(this.user.mobile)
            this.$toast('发送成功')
         } catch (err) {
            // 发送失败，关闭倒计时
            this.isCountDownShow = false
            // 每分钟发送一次，先判断一下
            if (err.response.status === 429) {
               this.$toast('发送太频繁了，请稍后重试')
            } else {
               this.$toast('发送失败，请稍后重试')
            }
         }
      }
   }
}
</script>

<style lang="less" scoped>
.login_container {
   .toutiao {
      font-size: 37px;
   }
   .send_sms_btn {
      background-color: #ededed;
      width: 156px;
      height: 46px;
      line-height: 46px;
      font-size: 22px;
      color: #666;
   }
   .login_btn_warp {
      padding: 53px 33px;
      .login_btn {
         background-color: #6db4fb;
         border: none;
      }
   }
}
</style>
